<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function checkForm(){
        var username=document.getElementById("username").value;
        var name=document.getElementById("name").value;
        var sex=document.getElementById("sex").value;
        var phone=document.getElementById("phone").value;
        var password=document.getElementById("passWord").value;
        var rPassword=document.getElementById("rPassword").value;

        if(username=="" ||name==""||phone=="" ||password==""||rPassword==""){
            document.getElementById("error").innerHTML="信息填写不完整！";
            return false;
        } else if(password!=rPassword){
            document.getElementById("error").innerHTML="密码填写不一致！";
            return false;
        }else if(!/^1[2345678]\d{9}$/.test(phone)){
            document.getElementById("error").innerHTML="手机号码格式错误！";
            return false;
        }
        var pwdEncode=window.btoa(password);
        document.getElementById("passWord").value = pwdEncode;
        return true;
    }
</script>

<div class="data_list">
    <div class="data_list_title">
        添加用户
    </div>
    <form action="${pageContext.request.contextPath}/user/addUser" method="post" onsubmit="return checkForm()">
        <div class="data_form" >
            <div align="center">
                <font id="error" color="red"></font>
            </div>
            <table align="center">
                <tr>
                    <td><font color="red">*</font>用户名：</td>
                    <td><input type="text" id="username"  name="username" value=""  style="margin-top:5px;height:30px;" /></td>
                </tr>
                <tr>
                    <td><font color="red">*</font>姓名：</td>
                    <td><input type="text" id="name"  name="name" value=""  style="margin-top:5px;height:30px;" /></td>
                </tr>
                <tr>
                    <td><font color="red">*</font>性别：</td>
                    <td>
                        <select id="sex" name="sex" style="width: 90px;">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><font color="red">*</font>联系电话：</td>
                    <td><input type="text" id="phone"  name="phone" value=""  style="margin-top:5px;height:30px;" /></td>
                </tr>
                <tr>
                    <td><font color="red">*</font>密码：</td>
                    <td><input type="password" id="passWord"  name="password" value=""  style="margin-top:5px;height:30px;" /></td>
                </tr>
                <tr>
                    <td><font color="red">*</font>重复密码：</td>
                    <td><input type="password" id="rPassword"  name="rPassword" value=""  style="margin-top:5px;height:30px;" /></td>
                </tr>
            </table>
            <div align="center">
                <input type="submit" class="btn btn-primary" value="确认"/>
                &nbsp;<button class="btn btn-primary" type="button" onclick="javascript:history.back()">返回</button>
            </div>
        </div>
    </form>
</div>
